<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css"
          rel="stylesheet"/>
    <link type="text/css" rel="stylesheet" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css"/>

    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript"
            src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0_bak/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
    <script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>

    <script type="text/javascript">

        $(function () {
            //给创建按钮添加点击事件
            $("#createActivityBtn").click(function () {
                //重置表单
                $("#createActivityForm").get(0).reset()
                //弹出模态窗口
                $("#createActivityModal").modal("show");
            })

            //给保存按钮添加单击事件：
            $("#saveCreateActivityBtn").click(function () {
                $("#createActivityModal").modal("hide");
                var owner = $("#create-marketActivityOwner").val();
                var name = $("#create-marketActivityName").val();
                var startDate = $("#create-startDate").val();
                var endDate = $("#create-endDate").val();
                var cost = $("#create-cost").val();
                var description = $("#create-description").val();

                if (owner == "") {
                    alert("所有者不能为空");
                    return;
                }
                if (name == "") {
                    alert("名称不能为空");
                    return;
                }
                if (startDate != "" && endDate != "") {
                    if (endDate < startDate) {
                        alert("结束日期不能比开始日期小");
                        return;
                    }
                }
                var regExp = /^(([1-9]\d*)|0)$/;
                if (!regExp.test(cost)) {
                    alert("成本只能是非负整数");
                    return;
                }
                $.ajax({
                    url: "workbench/activity/saveCreateActivity.do",
                    data: {
                        owner: owner,
                        name: name,
                        startDate: startDate,
                        endDate: endDate,
                        cost: cost,
                        description: description
                    },
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                        if (data.code == "1") {
                            //添加成功后关闭窗口
                            $("#createActivityModal").modal("hide");
                            //刷新页面  显示新数据
                            var pageSize = $("#demo_page1").bs_pagination("getOption", "rowsPerPage");  //获取参数
                            queryActivityForPage(1, pageSize);
                        } else {
                            alert(data.message);
                            $("#createActivityModal").modal("show");
                        }
                    }
                })

            })
            //模态窗口的日历视图
            $(".mydate").datetimepicker({
                language: 'zh-CN', //语言
                format: 'yyyy-mm-dd', //格式
                minView: 'month', //可以选择的最小视图
                initialDate: new Date(),  //初始化日期显示
                autoclose: true,   //选择完时间后自动关闭
                todayBtn: true,  //显示今天的按钮
                clearBtn: true  //设置是否显示清空按钮
            })


            function queryActivityForPage(pageNo, pageSize) {  //分页查询  ,pageNo:第几页   pageSize:每页条数
                var name = $("#query-name").val();
                var owner = $("#query-owner").val();
                var startDate = $("#query-startDate").val();
                var endDate = $("#query-EndTime").val();
                // var pageNo=1;
                // var pageSize=10;
                $.ajax({
                    url: 'workbench/activity/queryActivityByConditionForPage.do',
                    data: {
                        name: name,
                        owner: owner,
                        startDate: startDate,
                        endDate: endDate,
                        pageNo: pageNo,
                        pageSize: pageSize
                    },
                    type: "post",
                    dataType: 'json',
                    success: function (data) {
                        //显示总条数
                        $("#totalRowsB").text(data.totalRows);

                        //显示活动列表：
                        var htmlStr = "";
                        $.each(data.activityList, function (index, obj) {
                            htmlStr += "<tr class=\"active\">";
                            htmlStr += "<td><input type=\"checkbox\" value=\"" + obj.id + "\" /></td>";
                            htmlStr += "	<td><a style=\"text-decoration: none; cursor: pointer;\"onclick=\"window.location.href='workbench/activity/detailActivity.do?id="+obj.id+"'\">"+ obj.name + "</a></td>";
                            htmlStr += "	<td>" + obj.owner + "</td>";
                            htmlStr += "	<td>" + obj.startDate + "</td>"+"";
                            htmlStr += "	<td>" + obj.endDate + "</td>";
                            htmlStr += "	</tr>";
                        });
                        $("#tBody").html(htmlStr);
                        $("#checkAll").prop("checked", false);
                        var totalPages = 1;
                        if (data.totalRows % pageSize == 0) {
                            totalPages = data.totalRows / pageSize;
                        } else {
                            totalPages = parseInt(data.totalRows / pageSize) + 1;
                        }
                        //显示翻页信息：
                        $("#demo_page1").bs_pagination({
                            currentPage: pageNo,      //第几页
                            rowsPerPage: pageSize,   //每页条数
                            totalRows: data.totalRows,  //总条数
                            totalPages: totalPages,   //总页数（必填）
                            visiblePageLinks: 5,    //显示的按钮卡片数
                            showGoToPage: true,
                            showRowsPerPage: true,
                            showRowsInfo: true,
                            //每次触发切换页面 自动触动函数
                            onChangePage: function (event, pageObj) {
                                queryActivityForPage(pageObj.currentPage, pageObj.rowsPerPage);
                            }
                        });
                    }
                });
            }

            //加载页面，默认查询第一页数据，及总条数 ，默认每页10条
            queryActivityForPage(1, 10);

            //点击查询按钮时
            $("#queryActivityBtn").click(function () {
                var pageSize = $("#demo_page1").bs_pagination("getOption", "rowsPerPage");  //获取参数
                queryActivityForPage(1, pageSize);
            });

            //全选按钮点击事件
            $("#checkAll").click(function () {
                $("#tBody input[type='checkbox']").prop("checked", this.checked);  // tBody下的属性为checkbox的input标签
            });
            //有一个checkbox没选中时，将 全选的按钮框取消
            $("#tBody").on("click", "input[type='checkbox']", function () {
                if ($("#tBody input[type='checkbox']:checked").size() == $("#tBody input[type='checkbox']").size()) {
                    $("#checkAll").prop("checked", true);
                } else {
                    $("#checkAll").prop("checked", false);
                }
            });

            //删除按钮添加点击事件
            $("#deleteActivityBtn").click(function () {
                //获取选中的 checkbox
                var checkboxs = $("#tBody input[type='checkbox']:checked");
                if (checkboxs.size() == 0) {
                    alert("请选择需要删除的信息");
                    return;
                }
                if (window.confirm("确定删除吗？")) {
                    var ids = "";
                    $.each(checkboxs, function () {    //每遍历一次 执行一次函数
                        ids += "id=" + this.value + "&";  //拼接：  id=xxxx&id=xxx&id=xx&
                    })
                    //去掉最后的 &
                    ids = ids.substr(0, ids.length - 1);  //arg0: 起始字符下标, arg1:长度
                    $.ajax({
                        url: "workbench/activity/deleteActivityIds",
                        type: 'post',
                        data: ids,
                        dataType: 'json',
                        success: function (data) {
                            if (data.code == "1") {
                                //刷新显示的市场活动信息
                                var pageSize = $("#demo_page1").bs_pagination("getOption", "rowsPerPage");  //分页的每页大小获取参数
                                queryActivityForPage(1, pageSize);
                            } else {
                                alert(data.message);
                            }
                        }
                    });
                }
            });

            //点击 修改 按钮触发：
            $("#editActivityBtn").click(function () {
                //获取选中的checkbox，没选中就提示，选多了也提示
                var editCheckbox = $("#tBody input[type='checkbox']:checked");
                if (editCheckbox.size() > 1) {
                    alert("每次只能选择一个市场活动进行修改");
                    return;
                }
                if (editCheckbox.size() == 0) {
                    alert("请选择需要修改的市场活动信息");
                    return;
                }
                //获取checkbox 的value属性值
                var id = editCheckbox.val();   //有些浏览器不支持  xxxx.value
                //发送ajax
                $.ajax({
                        url: "workbench/activity/queryActivityById.do",
                        data: {
                            id: id
                        },
                        type: 'post',
                        dataType: 'json',
                        success: function (data) {
                            //给模态窗口的Input 设置值
                            $("#edit-id").val(data.id);
                            $("#edit-marketActivityOwner").val(data.owner);  //下拉框会根据value属性值自动选中对应的
                            $("#edit-startTime").val(data.startDate);
                            $("#edit-endTime").val(data.endDate);
                            $("#edit-marketActivityName").val(data.name);
                            $("#edit-cost").val(data.cost);
                            $("#edit-description").val(data.description);
                            //显示模态窗口
                            $("#editActivityModal").modal("show");
                        }

                    }
                )
            })

            //点击修改后弹出模态窗口的 保存按钮
            $("#saveEditActivityBtn").click(function (){
                var id=$("#edit-id").val();
                var owner=$("#edit-marketActivityOwner").val();
                var startDate=$("#edit-startTime").val();
                var endDate=$("#edit-endTime").val();
                var activityname=$("#edit-marketActivityName").val();
                var cost=$("#edit-cost").val();
                var description=$("#edit-description").val();
                if (owner == "") {
                    alert("所有者不能为空");
                    return;
                }
                if (activityname == "") {
                    alert("名称不能为空");
                    return;
                }
                if (startDate != "" && endDate != "") {
                    if (endDate < startDate) {
                        alert("结束日期不能比开始日期小");
                        return;
                    }
                }
                var regExp = /^(([1-9]\d*)|0)$/;
                if (!regExp.test(cost)) {
                    alert("成本只能是非负整数");
                    return;
                }
                $.ajax({
                    url:'workbench/activity/savaEditActivity.do',
                    data:{
                        id:id,
                        owner:owner,
                        startDate:startDate,
                        endDate:endDate,
                        name:activityname,
                        cost:cost,
                        description:description
                    },
                    dataType:'json',
                    type:'post',
                    success:function (data){
                        if (data.code=='1'){ //成功
                            $("#editActivityModal").modal("hide");
                            //刷新显示页面，且保持页面页号和条数不变
                            var pageSize = $("#demo_page1").bs_pagination("getOption", "rowsPerPage");  //分页的每页大小获取参数
                            var currentPage=$("#demo_page1").bs_pagination("getOption", "currentPage");
                            queryActivityForPage(currentPage,pageSize);
                        }else{
                            alert(data.message);
                            $("#editActivityModal").modal("show");
                        }
                    }
                })
            })
            //市场活动导出excel文件
            $("#exportActivityAllBtn").click(function (){
                window.location.href="workbench/activity/exportAllActivitys.do";
            });
            //点击上传列表数据按钮 ，显示模态窗口
            $("#importActivityModolBtn").click(function (){
                $("#importActivityModal").modal("show");
            })

            //点击导入按钮
            $("#importActivityBtn").click(function (){
                var filename=$("#activityFile").val();  // 这里获取的是文件名，不是这个文件对象
                var suffix = filename.substr(filename.lastIndexOf(".")+1); //后缀
                var activityFile=$("#activityFile")[0].files[0];   //[0] 是将jquery对象转成document对象，再获取 文件对象
                if (suffix.toLowerCase()!="xls") {   //操作系统中的文件 后缀是不区分大小写的
                    alert("只能上传xls类型的文件");
                    return;
                }else if(activityFile.size>5*1024*1024){
                    alert("文件大小不能超过5MB");
                    return;
                } else {
                    var formData=new FormData();
                    formData.append("activityFile",activityFile);
                    formData.append("user","测试传递数据")
                    $.ajax({
                        url:'workbench/activity/imporActivity.do',
                        data:formData,
                        processData:false,
                        contentType:false,
                        type:'post',
                        dataType:'json',
                        success:function (data){
                            if (data.code=='1'){  //上传成功 ,关闭模态窗口 ，刷新显示信息
                                alert("成功导入"+data.retData+"条记录")
                                $("#importActivityModal").modal("hide");
                                var pageSize = $("#demo_page1").bs_pagination("getOption", "rowsPerPage");  //分页的每页大小获取参数
                                queryActivityForPage(1,pageSize);
                            }else{
                                $("#importActivityModal").modal("show");
                                alert(data.message);
                            }
                        }
                    })
                }

            })

        });

    </script>
</head>
<body>

<!-- 创建市场活动的模态窗口 -->
<div class="modal fade" id="createActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
            </div>
            <div class="modal-body">

                <form id="createActivityForm" class="form-horizontal" role="form">

                    <div class="form-group">
                        <label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="create-marketActivityOwner">
                                <c:forEach items="${requestScope.userList}" var="user">
                                    <option value="${user.id}">${user.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-marketActivityName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create-startDate" class="col-sm-2 control-label">开始日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control mydate" id="create-startDate" readonly>
                        </div>
                        <label for="create-endDate" class="col-sm-2 control-label">结束日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control  mydate" id="create-endDate" readonly>
                        </div>
                    </div>
                    <div class="form-group">

                        <label for="create-cost" class="col-sm-2 control-label">成本</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-cost">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create-description" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <textarea class="form-control" rows="3" id="create-description"></textarea>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveCreateActivityBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改市场活动的模态窗口 -->
<div class="modal fade" id="editActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form">
                    <input type="hidden" id="edit-id">    <!--隐藏的input  用来存放id值 -->
                    <div class="form-group">
                        <label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="edit-marketActivityOwner">
                                <c:forEach items="${requestScope.userList}" var="user">
                                    <option value="${user.id}">${user.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-marketActivityName" value="发传单">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-startTime" class="col-sm-2 control-label " readonly>开始日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control mydate" id="edit-startTime" value="2020-10-10">
                        </div>
                        <label for="edit-endTime" class="col-sm-2 control-label " readonly>结束日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control mydate" id="edit-endTime" value="2020-10-20">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-cost" class="col-sm-2 control-label">成本</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-cost" value="5,000">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-description" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <textarea class="form-control" rows="3" id="edit-description">市场活动Marketing，是指品牌主办或参与的展览会议与公关市场活动，包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等</textarea>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveEditActivityBtn">更新</button>
            </div>
        </div>
    </div>
</div>

<!-- 导入市场活动的模态窗口 -->
<div class="modal fade" id="importActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
            </div>
            <div class="modal-body" style="height: 350px;">
                <div style="position: relative;top: 20px; left: 50px;">
                    请选择要上传的文件：<small style="color: gray;">[仅支持.xls]</small>
                </div>
                <div style="position: relative;top: 40px; left: 50px;">
                    <input type="file" id="activityFile">
                </div>
                <div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;">
                    <h3>重要提示</h3>
                    <ul>
                        <li>操作仅针对Excel，仅支持后缀名为XLS的文件。</li>
                        <li>给定文件的第一行将视为字段名。</li>
                        <li>请确认您的文件大小不超过5MB。</li>
                        <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式。</li>
                        <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式。</li>
                        <li>默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。</li>
                        <li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="importActivityBtn" type="button" class="btn btn-primary">导入</button>
            </div>
        </div>
    </div>
</div>


<div>
    <div style="position: relative; left: 10px; top: -10px;">
        <div class="page-header">
            <h3>市场活动列表</h3>
        </div>
    </div>
</div>
<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

        <div class="btn-toolbar" role="toolbar" style="height: 80px;">
            <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">名称</div>
                        <input class="form-control" type="text" id="query-name">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">所有者</div>
                        <input class="form-control" type="text" id="query-owner">
                    </div>
                </div>


                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">开始日期</div>
                        <input class="form-control" type="text" id="query-startDate"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">结束日期</div>
                        <input class="form-control" type="text" id="query-EndTime">
                    </div>
                </div>

                <button type="button" class="btn btn-default" id="queryActivityBtn">查询</button>

            </form>
        </div>
        <div class="btn-toolbar" role="toolbar"
             style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
            <div class="btn-group" style="position: relative; top: 18%;">
                <button type="button" class="btn btn-primary" id="createActivityBtn"><span
                        class="glyphicon glyphicon-plus"></span> 创建
                </button>
                <button type="button" class="btn btn-default" id="editActivityBtn"><span
                        class="glyphicon glyphicon-pencil"></span> 修改
                </button>
                <button type="button" class="btn btn-danger" id="deleteActivityBtn"><span
                        class="glyphicon glyphicon-minus"></span> 删除
                </button>
            </div>
            <div class="btn-group" style="position: relative; top: 18%;">
                <button type="button" class="btn btn-default"  id="importActivityModolBtn">
                    <span class="glyphicon glyphicon-import"></span> 上传列表数据（导入）
                </button>
                <button id="exportActivityAllBtn" type="button" class="btn btn-default"><span
                        class="glyphicon glyphicon-export"></span> 下载列表数据（批量导出）
                </button>
                <button id="exportActivityXzBtn" type="button" class="btn btn-default"><span
                        class="glyphicon glyphicon-export"></span> 下载列表数据（选择导出）
                </button>
            </div>
        </div>
        <div style="position: relative;top: 10px;">
            <table class="table table-hover">
                <thead>
                <tr style="color: #B3B3B3;">
                    <td><input type="checkbox" id="checkAll"/></td>
                    <td>名称</td>
                    <td>所有者</td>
                    <td>开始日期</td>
                    <td>结束日期</td>
                </tr>
                </thead>
                <tbody id="tBody">
                <%--						<tr class="active">--%>
                <%--							<td><input type="checkbox" /></td>--%>
                <%--							<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.jsp';">发传单</a></td>--%>
                <%--                            <td>zhangsan</td>--%>
                <%--							<td>2020-10-10</td>--%>
                <%--							<td>2020-10-20</td>--%>
                <%--						</tr>--%>
                <%--                        <tr class="active">--%>
                <%--                            <td><input type="checkbox" /></td>--%>
                <%--                            <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.jsp';">发传单</a></td>--%>
                <%--                            <td>zhangsan</td>--%>
                <%--                            <td>2020-10-10</td>--%>
                <%--                            <td>2020-10-20</td>--%>
                <%--                        </tr>--%>
                </tbody>
            </table>
            <div id="demo_page1"></div>
        </div>

        <%--			<div style="height: 50px; position: relative;top: 30px;">--%>
        <%--				<div>--%>
        <%--					<button type="button" class="btn btn-default" style="cursor: default;">共<b id="totalRowsB">50</b>条记录</button>--%>
        <%--				</div>--%>
        <%--				<div class="btn-group" style="position: relative;top: -34px; left: 110px;">--%>
        <%--					<button type="button" class="btn btn-default" style="cursor: default;">显示</button>--%>
        <%--					<div class="btn-group">--%>
        <%--						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">--%>
        <%--							10--%>
        <%--							<span class="caret"></span>--%>
        <%--						</button>--%>
        <%--						<ul class="dropdown-menu" role="menu">--%>
        <%--							<li><a href="#">20</a></li>--%>
        <%--							<li><a href="#">30</a></li>--%>
        <%--						</ul>--%>
        <%--					</div>--%>
        <%--					<button type="button" class="btn btn-default" style="cursor: default;">条/页</button>--%>
        <%--				</div>--%>
        <%--				<div style="position: relative;top: -88px; left: 285px;">--%>
        <%--					<nav>--%>
        <%--						<ul class="pagination">--%>
        <%--							<li class="disabled"><a href="#">首页</a></li>--%>
        <%--							<li class="disabled"><a href="#">上一页</a></li>--%>
        <%--							<li class="active"><a href="#">1</a></li>--%>
        <%--							<li><a href="#">2</a></li>--%>
        <%--							<li><a href="#">3</a></li>--%>
        <%--							<li><a href="#">4</a></li>--%>
        <%--							<li><a href="#">5</a></li>--%>
        <%--							<li><a href="#">下一页</a></li>--%>
        <%--							<li class="disabled"><a href="#">末页</a></li>--%>
        <%--						</ul>--%>
        <%--					</nav>--%>
        <%--				</div>--%>
        <%--			</div>--%>

    </div>

</div>
</body>
</html>
